<!DOCTYPE html>
<html>
    <head>
        <title>Gua WebSocket Chat</title>
        <style>
            body { font-family: Arial, sans-serif; margin: 20px; }
            #messages {
                height: 300px;
                overflow-y: auto;
                border: 1px solid #ccc;
                padding: 10px;
                margin-bottom: 10px;
            }
            #input {
                width: 70%;
                padding: 5px;
            }
            #send {
                width: 25%;
                padding: 5px;
            }
            .message { margin: 5px 0; padding: 5px; border-radius: 5px; }
            .welcome { background-color: #e8f5e8; }
            .system { background-color: #f0f0f0; }
            .user { background-color: #e3f2fd; }
            .error { background-color: #ffebee; color: #c62828; }
        </style>
    </head>
    <body>
        <h1>🌐 Gua WebSocket 聊天室</h1>
        <div id="messages"></div>
        <div>
            <input type="text" id="input" placeholder="输入消息..." />
            <button id="send">发送</button>
        </div>
        
        <script>
            const messages = document.getElementById('messages');
            const input = document.getElementById('input');
            const send = document.getElementById('send');
            
            // 连接WebSocket
            const ws = new WebSocket('ws://localhost:8000/ws');
            
            function addMessage(content, className = '') {
                const div = document.createElement('div');
                div.className = `message ${className}`;
                div.innerHTML = content;
                messages.appendChild(div);
                messages.scrollTop = messages.scrollHeight;
            }
            
            ws.onopen = () => {
                addMessage('已连接到聊天室', 'welcome');
            };
            
            ws.onmessage = (event) => {
                try {
                    const data = JSON.parse(event.data);
                    const time = new Date(data.timestamp * 1000).toLocaleTimeString();
                    
                    switch(data.type) {
                        case 'welcome':
                            addMessage(`🎉 ${data.message}`, 'welcome');
                            break;
                        case 'user_joined':
                            addMessage(`👋 ${data.message}`, 'system');
                            break;
                        case 'user_left':
                            addMessage(`👋 ${data.message}`, 'system');
                            break;
                        case 'message':
                            addMessage(`[${time}] ${data.sender}: ${data.data}`, 'user');
                            break;
                        case 'error':
                            addMessage(`❌ ${data.message}`, 'error');
                            break;
                    }
                } catch (e) {
                    addMessage(`收到消息: ${event.data}`, 'user');
                }
            };
            
            ws.onerror = (error) => {
                addMessage('连接错误', 'error');
            };
            
            ws.onclose = () => {
                addMessage('连接已关闭', 'system');
            };
            
            function sendMessage() {
                const text = input.value.trim();
                if (text) {
                    ws.send(text);
                    input.value = '';
                }
            }
            
            send.addEventListener('click', sendMessage);
            input.addEventListener('keypress', (e) => {
                if (e.key === 'Enter') {
                    sendMessage();
                }
            });
            
            // 自动重连
            let reconnectInterval;
            ws.addEventListener('close', () => {
                clearInterval(reconnectInterval);
                reconnectInterval = setInterval(() => {
                    if (ws.readyState === WebSocket.CLOSED) {
                        addMessage('尝试重新连接...', 'system');
                        ws.connect();
                    }
                }, 5000);
            });
        </script>
    </body>
</html>